<template>
  <div class="enterpriseGrowth">
    <!-- 头部 -->
    <echartsHeader title="企业增长统计" />
    <div class="contents">
      <div class="bg-change">
        <!-- 统计 块 -->
        <el-form label-width="44px" :model="form">
          <el-row :gutter="20" type="flex" class="row-bg" width='100%' justify='space-around'>
            <el-col :span="5">
              <el-form-item label="区县">
                <el-select placeholder="区县" v-model="form.area" :popper-append-to-body="false">
                  <el-option v-for='item in area' :value="item.val" :key='item.id' :label="item.name"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="5">
              <el-form-item label="行业">
                <el-select placeholder="行业" v-model="form.trade" :popper-append-to-body="false">
                  <el-option v-for='item in trade' :value="item.code" :key='item.id' :label="item.name"></el-option>
                </el-select>
                <!-- <el-cascader v-model="form.trade" :options="trade" placeholder="行业" :props='props'
                  :appendToBody="false"></el-cascader> -->
              </el-form-item>
            </el-col>
            <el-col :span="5">
              <el-form-item label="性质">
                <el-select placeholder="性质" v-model="form.nature" :popper-append-to-body="false">
                  <el-option v-for='item in nature' :value="item.val" :key='item.id' :label="item.name"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="5">
              <el-form-item label="规模">
                <el-select placeholder="规模" v-model="form.scale" :popper-append-to-body="false">
                  <el-option v-for='item in scale' :value="item.val" :key='item.id' :label="item.name"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <el-row class="btn-box" :gutter="20" type="flex" width='100%' justify='space-around'>
          <el-col :span="8" :offset="16">
            <el-button type="primary" @click="search">查询</el-button>
            <el-button type="primary" @click="reset">重置</el-button>
          </el-col>
        </el-row>
        <!-- 图表1 -->
        <div class="grid-content bg-purple" ref="echarts">
          <!-- 内容+图表 -->
          <!-- id不要重复 -->
          <div id="ec_1"></div>
        </div>
        <!-- 图表1 -->
        <el-table :data="tableData" style="width: 100%" :stripe='true' header-row-class-name='table' height="240">
          <el-table-column prop="dailyDate" label="日期">
          </el-table-column>
          <el-table-column prop="dailyCount" label="企业增长量">
          </el-table-column>
          <el-table-column prop="tbValue" label="同比">
            <template slot-scope="scope">{{ scope.row.tbValue===null?'-':scope.row.tbValue }}</template>
          </el-table-column>
          <el-table-column prop="hbValue" label="环比">
            <template slot-scope="scope">{{ scope.row.hbValue===null?'-' :scope.row.hbValue}}</template>
          </el-table-column>
        </el-table>
        <div class="page">
          <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
            :current-page="page" :page-sizes="[5,10,30,60,100,200,300]" :page-size="size"
            layout="prev, pager, next, jumper, sizes, total" :total="total"></el-pagination>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { MyEcharts } from '@/components/page/DataCenter/utils/echart-utils'
import { dailyEcharts, tbvalue } from '../../../../api/dataCenter'
import { getArea, getNature, getScale, findTradeDict } from '../../../../api/index'
import bus from '../../../common/bus'
export default {
  name: 'enterpriseGrowth',
  data () {
    return {
      page: 1,
      size: 5,
      total: 0,
      form: {
        area: null,
        trade: null,
        nature: null,
        scale: null,
        dateCondition: 2
      },
      // props: { value: 'code', label: 'name', children: 'childVo', multiple: false },
      area: [], // 地区
      trade: [], // 行业
      nature: [], // 性质
      scale: [], // 规模
      echarts: null,
      Xdata: [], //横坐标
      Ydata: [], // 数据
      tableData: [],
    }
  },
  mounted () {
    this.getDic();
    this.getEchartsData();
    this.getPageData();
  },
  methods: {
    // 绘制图表
    optionChart () {
      let Line = {
        config: true,
        //标题
        title: {
          text: "", //标题
          subtext: "", //副标题
          x: 'center', //位置默认居中
        },
        //提示
        tooltip: {
          show: true,
          trigger: 'axis',
        },
        //组建
        legend: {
          orient: 'vertical', //垂直：vertical； 水平 horizontal
          left: 'middle', //位置默认右
          data: ['企业增长量'], // ['邮件营销', '联盟广告', '视频广告', '直接访问', '搜索引擎']
          textStyle: {
            color: '#DCDFE6',
            fontSize: 12
          }
        },
        dataZoom: [{
          show: true,
          realtime: true,
          start: 0,
          end: 100
        },
        {
          type: 'slider',
          realtime: true,
          textStyle: {
            color: '#fff'
          },
          start: 0,
          end: 100
        }
        ],
        grid: {
          left: '10%',
          top: '10%',
          right: '10%',
          bottom: '25%',
        },
        //水平坐标
        xAxis: [{
          type: 'category',
          data: this.Xdata, // ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
          boundaryGap: false,
          splitLine: {
            show: true,
          },
          // 文字颜色
          axisLabel: {
            show: true,
            textStyle: {
              color: '#fff'
            }
          },
          splitLine: { //网格线
            "show": false
          }
        }],
        //垂直坐标
        yAxis: [{
          type: 'value',
          axisLabel: {
            formatter: '{value}',
            textStyle: {
              color: '#fff'
            }
          }
        }],
        //series数据
        series: [
          {
            itemStyle: {
              normal: {
                color: '#3856ae', //改变折线点的颜色
                lineStyle: {
                  color: '#3856ae' //改变折线颜色
                }
              }
            },
            name: '企业增长量',
            type: 'line',
            stack: '总量',
            data: this.Ydata
          }
        ]
      }
      let option_pie = MyEcharts.EchartsOption.Line('', '', Line)
      this.echarts = MyEcharts.initChart(option_pie, 'ec_1');
      window.addEventListener('resize', () => {
        console.log(1);
        this.echarts.resize();
      })
      bus.$on('collapse', i => {
        MyEcharts.initChart(option_pie, 'ec_1')
      })
    },
    // 获取字典
    getDic () {
      Promise.all([getArea(), getNature(), getScale(), findTradeDict()]).then(res => {
        [this.area, this.nature, this.scale, this.trade] = [...res.map(i => { return i.data })]
      })
    },
    // 获取图表数据
    getEchartsData () {
      let query = { ...this.form }
      dailyEcharts(query).then(res => {
        if (res.success) {
          console.log(res.data);
          this.Xdata = res.data.dailyDateList || [];
          this.Ydata = res.data.dailyCountList || [];
          this.optionChart();
        } else {
          this.$message.error(res.msg)
        }
      })
    },
    // 获取列表数据
    getPageData () {
      let query = { ...this.form, page: this.page, size: this.size };
      tbvalue(query).then(res => {
        if (res.success) {
          this.tableData = res.data.records || [];
          this.total = res.data.total || 0
        } else {
          this.$message.error(res.msg)
        }
      })
    },
    // 查询
    search () {
      console.log(this.form);
      this.page = 1;
      this.size = 5;
      this.getPageData();
      this.getEchartsData();
    },
    // 重置
    reset () {
      this.form = {
        area: null,
        trade: null,
        nature: null,
        scale: null,
        dateCondition: 2
      };
      this.page = 1;
      this.size = 5;
      this.getPageData();
      this.getEchartsData();
    },
    handleCurrentChange (val) {
      this.page = val;
      this.getPageData();
    },
    handleSizeChange (val) {
      this.size = val;
      this.getPageData();
    }
  }
}
</script>

<style lang="css" scoped>
.enterpriseGrowth {
    width: 100%;
}
.contents {
    background: #080950;
    padding: 20px 32px;
}
.bg-change {
    background: #08085f;
    padding-top: 28px;
    width: 100%;
}
.el-form /deep/ .el-form-item__label {
    font-size: 14px;
    font-family: PingFang SC;
    font-weight: 400;
    line-height: 30px;
    color: rgba(255, 255, 255, 1);
    opacity: 1;
}
.el-form /deep/ .el-input__inner {
    width: 240px;
    height: 30px;
    background: rgba(21, 22, 114, 1);
    border: 1px solid rgba(16, 69, 218, 1);
    opacity: 1;
}
.bg-purple {
    background-color: transparent !important;
    width: 100%;
    text-align: center;
}
#ec_1 {
    margin: 0 auto;
    width: 100%;
    height: 350px;
    display: flex;
    justify-content: space-around;
}
.el-table {
    margin-top: 20px;
    background: transparent;
    border: 1px solid #042c9b;
}
.el-table /deep/ tr,
.el-table /deep/ th,
.el-table /deep/ td {
    height: 34px;
    background-color: transparent !important;
    text-align: center;
    border: none;
    font-size: 14px;
    font-family: PingFang SC;
    font-weight: 400;
    line-height: 23px;
    color: rgba(255, 255, 255, 1);
    opacity: 1;
}
.el-table /deep/ .table {
    height: 34px;
    background: rgba(4, 44, 155, 1) !important;
    opacity: 1;
}
.table /deep/ th {
    height: 34px;
    background: rgba(4, 44, 155, 1) !important;
    opacity: 1;
}
.el-table.el-table--striped /deep/ .el-table__body tr.el-table__row--striped td {
    background-color: rgba(21, 22, 114, 1) !important;
}
.el-table--border::after,
.el-table--group::after,
.el-table::before {
    content: '';
    position: absolute;
    background-color: transparent !important;
    z-index: 1;
}
.page {
    text-align: center;
    padding: 10px 0;
}
.page /deep/ .btn-prev,
.page /deep/ .btn-next,
.page /deep/ li.number,
.page /deep/ li.more,
.page /deep/ .el-pagination__jump .el-input__inner {
    width: 30px;
    height: 26px;
    color: rgba(255, 255, 255, 1);
    background: transparent;
    border: 1px solid rgba(16, 69, 218, 1);
}
.page /deep/ .el-pagination__sizes .el-input__inner {
    background: transparent;
    border: 1px solid rgba(16, 69, 218, 1);
}
.btn-box {
    text-align: right;
}
.btn-box .el-col {
    margin-right: 40px;
}
.btn-box .el-button {
    margin-right: 20px;
    width: 91px;
    height: 30px;
    font-size: 14px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    line-height: 0;
    color: rgba(255, 255, 255, 1);
    /* letter-spacing: 79px; */
    background: rgba(16, 69, 218, 1);
    opacity: 1;
    border-radius: 4px;
}
</style>